<template>
  <div class="flex items-center w-60">
    <div @click="sub" class="m-0 btn rounded-l-lg">-</div>
    <input :value="modelValue" @input="$emit('update:modelValue', parseInt($event.target.value) || 0)"
      class="p-1 text-center text-xl">
    <div @click="add" class="m-0 btn rounded-r-lg">+</div>
  </div>
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function add() {
  emit('update:modelValue', props.modelValue + 1)
}
function sub() {
  emit('update:modelValue', props.modelValue - 1)
}

</script>

<style scoped>
.btn {
  @apply bg-blue-400 h-4 py-1 p-4 flex items-center text-white font-bold justify-center hover: bg-blue-700
}
</style>